<div th:fragment="header">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>ETL管理系统</title>

    <script src="../static/js/require.js" th:src="@{/js/require.js}" data-main=""></script>
    <script src="../static/js/main.js" th:src="@{/js/main.js}"></script>

    <!-- 告诉浏览器该页面是自适应布局 -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="../static/plugins/bootstrap/css/bootstrap.min.css"
          th:href="@{/plugins/bootstrap/css/bootstrap.min.css}"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../static/plugins/font-awesome/css/font-awesome.min.css"
          th:href="@{/plugins/font-awesome/css/font-awesome.min.css}"/>
    <!-- Ionicons -->
    <link rel="stylesheet" href="../static/plugins/Ionicons/css/ionicons.min.css"
          th:href="@{/plugins/Ionicons/css/ionicons.min.css}"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="../static/frame/css/AdminLTE.min.css"
          th:href="@{/frame/css/AdminLTE.min.css}"/>
    <!-- DataTables -->
    <link rel="stylesheet" href="../static/plugins/datatables.net/media/css/dataTables.bootstrap.min.css"
          th:href="@{/plugins/datatables.net/media/css/dataTables.bootstrap.min.css}"/>

    <!--FixedColumns-->
    <link rel="stylesheet" href="../static/plugins/datatables.net/extensions/FixedColumns/css/fixedColumns.dataTables.min.css"
          th:href="@{/plugins/datatables.net/extensions/FixedColumns/css/fixedColumns.dataTables.min.css}"/>
    <!--FixedHeader-->
    <link rel="stylesheet" href="../static/plugins/datatables.net/extensions/FixedHeader/css/fixedHeader.dataTables.css"
          th:href="@{/plugins/datatables.net/extensions/FixedHeader/css/fixedHeader.dataTables.css}"/>
    <!--ColReorder-->
    <link rel="stylesheet" href="../static/plugins/datatables.net/extensions/ColReorder/css/colReorder.dataTables.css"
          th:href="@{/plugins/datatables.net/extensions/ColReorder/css/colReorder.dataTables.css}"/>

    <!--https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css-->
    <link rel="stylesheet" href="../static/plugins/datatables.net/extensions/Select/css/select.dataTables.min.css"
          th:href="@{/plugins/datatables.net/extensions/Select/css/select.dataTables.min.css}"/>
    <!--https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css-->
    <link rel="stylesheet" href="../static/plugins/datatables.net/extensions/Buttons/css/buttons.dataTables.css"
          th:href="@{/plugins/datatables.net/extensions/Buttons/css/buttons.dataTables.css}"/>

    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="../static/plugins/iCheck/all.css" th:href="@{/plugins/iCheck/all.css}"/>
    <!--消息弹框动画样式-->
    <link rel="stylesheet" href="../static/plugins/bootstrap-notify/animate.css" th:href="@{/plugins/bootstrap-notify/animate.css}"/>

    <!-- Select2 -->
    <link rel="stylesheet" href="../static/plugins/select2/css/select2.min.css" th:href="@{/plugins/select2/css/select2.min.css}"/>

    <!-- AdminLTE 皮肤。
         从 css/skins 目录下选择一个皮肤，以减少负载，而不是下载所有皮肤。 -->
    <link rel="stylesheet" href="../static/frame/css/skins/_all-skins.min.css" th:href="@{/frame/css/skins/_all-skins.min.css}"/>

    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"
          th:href="@{/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}"/>

    <!-- Google Font -->
    <link rel="stylesheet" href="../static/frame/css/font-family.css"
          th:href="@{/frame/css/font-family.css}"/>

    <link rel="stylesheet" href="../static/frame/adminlte-wolf.css"
          th:href="@{/frame/adminlte-wolf.css}"/>

    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="../static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css"
          th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css}"/>

</div>

<div th:fragment="order_header">
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top top">
        <!-- Logo -->
        <a href="#" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>ETL管理系统</b></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">ETL管理系统</span>
        </a>

        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">切换导航</span>
        </a>

        <!-- Navbar Right Menu  右上角用户信息菜单 -->
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <!-- User Account: style can be found in dropdown.less -->
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="../../adminlte/adminlte/img/user2-160x160.jpg" class="user-image" alt="用户图像"/>
                        <span class="hidden-xs" th:text="${sysUser.realName}"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- User image 用户图像、名称-->
                        <li class="user-header">
                            <img src="../../adminlte/adminlte/img/user2-160x160.jpg" class="img-circle" alt="用户图像"/>
                            <p th:text="${sysUser.realName}">
                                Alexander Pierce - Web 开发人员
                            </p>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-left">
                                <a href="#" class="btn btn-default btn-flat">资料</a>
                            </div>
                            <div class="pull-right">
                                <a href="#" id="layout" class="btn btn-default btn-flat">退出</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <!-- Control Sidebar Toggle Button -->
                <li>
                    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li>
            </ul>
        </div>
    </nav>
    <!--主体tab显示-->
    <nav class="navbar navbar-static-top">
        <div class="collapse navbar-collapse pull-left top-menu" id="navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#" ><span th:text="${currentTitle}"></span> <span class="sr-only">（当前）</span></a></li>
            </ul>
        </div>
    </nav>

</div>

<!--左边菜单-->
<div th:fragment="left_sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
        <!-- /.search form -->
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu" data-widget="tree">
            <!--/*@thymesVar id="currentUrl" type=""*/-->
            <li class="header">系统</li>

            <li th:classappend="(${currentUrl eq '/sysUser/sysUser'} ? 'active':'')">
                <a th:href="@{/sysUser/sysUser}"><i class="fa fa-book"></i> <span>用户管理</span></a>
            </li>
            <li th:classappend="(${currentUrl eq '/etl/error_log/list'} ? 'active':'')">
                <a th:href="@{/etl/error_log/list}"><i class="fa fa-book"></i> <span>错误日志</span></a>
            </li>

            <li class="treeview">
                <a href="#">
                    <i class="fa fa-calendar"></i> <span>基础定义</span>
                    <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                </a>
                <ul class="treeview-menu">
                    <li th:classappend="(${currentUrl eq '/etl/datasource/list'} ? 'active':'')">
                        <a th:href="@{/etl/datasource/list}"><i class="fa fa-book"></i> <span>数据源</span></a>
                    </li>

                    <li th:classappend="(${currentUrl eq '/etl/define/list'} ? 'active':'')">
                        <a th:href="@{/etl/define/list}"><i class="fa fa-book"></i> <span>ETL定义</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/function/list'} ? 'active':'')">
                        <a th:href="@{/etl/function/list}"><i class="fa fa-book"></i> <span>sql函数</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/handler/list'} ? 'active':'')">
                        <a th:href="@{/etl/handler/list}"><i class="fa fa-book"></i> <span>ETL拦截处理</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/instance/list'} ? 'active':'')">
                        <a th:href="@{/etl/instance/list}"><i class="fa fa-book"></i> <span>ETL实例</span></a>
                    </li>

                    <li th:classappend="(${currentUrl eq '/etl/task/list'} ? 'active':'')">
                        <a th:href="@{/etl/task/list}"><i class="fa fa-book"></i> <span>任务</span></a>
                    </li>

                    <li th:classappend="(${currentUrl eq '/etl/api/list'} ? 'active':'')">
                        <a th:href="@{/etl/api/list}"><i class="fa fa-book"></i> <span>API</span></a>
                    </li>

                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-calendar"></i> <span>表字段管理</span>
                    <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                </a>
                <ul class="treeview-menu">
                    <li th:classappend="(${currentUrl eq '/etl/table/list'} ? 'active':'')">
                        <a th:href="@{/etl/table/list}"><i class="fa fa-book"></i> <span>表</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/rewrite_back/list'} ? 'active':'')">
                        <a th:href="@{/etl/rewrite_back/list}"><i class="fa fa-book"></i> <span>回写定义</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/table_rel/list'} ? 'active':'')">
                        <a th:href="@{/etl/table_rel/list}"><i class="fa fa-book"></i> <span>表关联</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/table_filter/list'} ? 'active':'')">
                        <a th:href="@{/etl/table_filter/list}"><i class="fa fa-book"></i> <span>过滤条件</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/table_orderby/list'} ? 'active':'')">
                        <a th:href="@{/etl/table_orderby/list}"><i class="fa fa-book"></i> <span>排序规则</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/transform_define/list'} ? 'active':'')">
                        <a th:href="@{/etl/transform_define/list}"><i class="fa fa-book"></i> <span>字段转换</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/transform_rule/list'} ? 'active':'')">
                        <a th:href="@{/etl/transform_rule/list}"><i class="fa fa-book"></i> <span>字段转换规则</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/transform_rule_type/list'} ? 'active':'')">
                        <a th:href="@{/etl/transform_rule_type/list}"><i class="fa fa-book"></i> <span>转换规则类型</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/transform_field_type/list'} ? 'active':'')">
                        <a th:href="@{/etl/transform_field_type/list}"><i class="fa fa-book"></i> <span>转换类型定义</span></a>
                    </li>
                </ul>
            </li>

            <li class="treeview">
                <a href="#">
                    <i class="fa fa-calendar"></i> <span>Javascript</span>
                    <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                </a>
                <ul class="treeview-menu">
                    <li th:classappend="(${currentUrl eq '/etl/javascript/list'} ? 'active':'')">
                        <a th:href="@{/etl/javascript/list}"><i class="fa fa-book"></i> <span>javascript</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/javascript_category/list'} ? 'active':'')">
                        <a th:href="@{/etl/javascript_category/list}"><i class="fa fa-book"></i> <span>javascript分类</span></a>
                    </li>
                    <li th:classappend="(${currentUrl eq '/etl/javascript_param/list'} ? 'active':'')">
                        <a th:href="@{/etl/javascript_param/list}"><i class="fa fa-book"></i> <span>javascript参数</span></a>
                    </li>
                </ul>
            </li>

        </ul>
    </section>
    <!-- /.sidebar -->
</div>

<!--底部-->
<div th:fragment="footer">
    <div class="pull-right hidden-xs">
        <b>Version</b> 1.0.0
    </div>
    <strong>Copyright &copy; 2016-2020 <a href="#">QIANCAO</a>.</strong> All rights reserved.
</div>

<!--右侧边栏-->
<div th:fragment="right_sidebar">
    <!-- Control Sidebar -->
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
        <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
        <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <!-- Home tab content -->
        <div class="tab-pane" id="control-sidebar-home-tab">

        </div>
        <!-- /.tab-pane -->

        <!-- Settings tab content -->
        <div class="tab-pane" id="control-sidebar-settings-tab">

        </div>
        <!-- /.tab-pane -->
    </div>

</div>